<template>

    <div>
      <div id="handlock">
        <div class="info"></div>
      </div>
      <div id="select">
        <div class="message">请输入手势密码</div>
        <!--<div class="radio">-->
          <!--<label><input type="radio" name="pass">设置手势密码</label>-->
          <!--<label><input type="radio" name="pass">验证手势密码</label>-->
        <!--</div>-->
      </div>
      <div v-if="checkType == 'register'" class='b_FS-28 text-center ptb20' style='padding-top: 140px'>
         设置手势密码登陆
      </div>
      <div  v-if="checkType == 'register'"
            @click= '$skipToTask'
            class='b_FS-20 text-center'
            style='color: red'>
        跳过
      </div>

    </div>
</template>
<script>

    import handLock from './handLock'
    import { Toast } from 'mint-ui'

    export default{
        data(){
            return{
              checkType : ''
            }
        },
        components:{

        },
        mounted(){
          var el = document.getElementById('handlock'),
          info = el.getElementsByClassName('info')[0],
          select = document.getElementById('select'),
          message = select.getElementsByClassName('message')[0],
          radio = select.getElementsByClassName('radio')[0]
          //setPass = radio.children[0].children[0],
          //checkPass = radio.children[1].children[0];
          let type
          if( this.$route.query.checkType == 'login' ){
            this.checkType = type = 'login'
          }
          else{
            this.checkType = type = 'register'
          }

          new handLock({
            el: el,
            info: info,
            message: message,
            n: 3 ,
            way: type ,
            validate : type == 'login' ? this.loginValidate : this.registerValidate
          }).init();
        },
        methods:{
          async loginValidate(record, successCb, errorCb){
            const name = this.$route.query.userName
            let res = await this.$post('/public/user/login', { name, record, loginType: 'handLogin'}).catch(err=>{
              Toast( err.msg )
              errorCb()
            })
            if( res ){
              Toast( '登陆成功' )
              successCb()
              localStorage.setItem('token', res.data.token)
              this.$router.push('/task')
            }
          },
          async registerValidate(record){
            console.log(record)
             let res = await this.$post('/api/user/handLockRecord', {record})
            Toast( '设置成功' )
            this.$router.push('/task')

          },
          $skipToTask(){
            this.$router.push('/task')
          }
        }
    }
</script>
<style scoped>
    #handlock { width: 100%; height: auto; margin: 0 auto; position: relative;}
    #handlock .info{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 300px; height: 50px; background-color: rgba(255, 255, 255, 0.6);
    color: #f702ef; line-height: 50px; font-size: 22px; border-radius: 50px; display: none;}
    #handlock canvas{ margin: 0 auto; }
    #select{ font-size: 20px; font-weight: bold; }
    #select .message{ color: red; padding: 0 10px;}
    #select .radio label{ display: block; margin: 10px 0 }
</style>
